<template>
  <view class="container">
    <view v-for="(item, index) in list" :key="index" class="patrol">
      <view class="patrol_list">
        <view class="patrol_top">
          <view class="patrol_top_left">
            <image src="../static/ico_shuiku.png" alt="">
            <view>{{ item.reservoirName }}</view>
          </view>
          <div class="view patrol_top_right">
            <view>{{ item.patrolStartTime + '至' + item.patrolEndTime }}</view>
          </div>
        </view>
        <view class="patrol_bot">
          <view class="patrol_start">
            <view class="patrol_start_box">
              <view>类型</view>
              <view>{{ item.patrolType }}</view>
            </view>
            <view class="patrol_start_box">
              <view>汛期</view>
              <view>{{ item.floodSeason }}</view>
            </view>
            <view class="patrol_start_box">
              <view>频次</view>
              <view>{{ item.frequency }}天/次</view>
            </view>
          </view>
          <view @click="toDetail(item)" class="patrol_btn">
            <view>进入巡查</view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    name: 'patrol',
    data() {
      return {
        list: [],
      }
    },
    onLoad(options) {
      
    },
    onShow() {
      this.getlist()
    },
    methods: {
      // 获取任务总览
      getlist() {
        this.$request.gettasklist().then(res => {
          this.list = res.data || []
        })
      },
      // 跳转详情
      toDetail(data) {
        uni.navigateTo({ url: '../inspection/index?data=' + JSON.stringify(data) })
      },
    },
  }
</script>

<style lang="scss" scoped>
  .patrol {
    margin: 0 25rpx;
    padding-top: 25rpx;

    .patrol_list {
      background-color: #fff;
      border-radius: 20rpx;
      box-shadow: 0 0 5px rgba($color: #000000, $alpha: 0.2);

      .patrol_top {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 30rpx 40rpx;
        border-bottom: 1px solid #f3f3f3;

        .patrol_top_left {
          display: flex;
          align-items: center;

          image {
            width: 35rpx;
            height: 35rpx;
            margin-right: 15rpx;
          }

          view {
            font-size: 30rpx;
            line-height: 30rpx;
          }
        }

        .patrol_top_right {
          font-size: 28rpx;
          line-height: 28rpx;
          color: #999;
        }
      }

      .patrol_bot {
        padding-top: 31rpx;
        padding-bottom: 30rpx;

        .patrol_start {
          display: flex;
          align-items: center;
          justify-content: space-evenly;

          .patrol_start_box {
            // width: 33.33%;
            display: flex;
            align-items: center;
            justify-content: center;

            view {
              font-size: 24rpx;

              &:nth-child(1) {
                margin-right: 25rpx;
              }

              &:nth-child(2) {
                color: #969696;
              }
            }
          }
        }

        .patrol_btn {
          margin-top: 50rpx;
          width: 100%;

          view {
            width: 304rpx;
            margin: 0 auto;
            font-size: 30rpx;
            line-height: 30rpx;
            color: #fff;
            padding: 24rpx 0;
            background-color: #458efb;
            border-radius: 20rpx;
            text-align: center;
          }
        }
      }
    }
  }
</style>
